import {useState} from 'react'
import {Form, InputNumber, Radio, Select, Switch} from "antd";
import {type GetSurnameParams, searchSurname} from "./utils/getSurname.ts";

const STUCTURES = [
  "左右结构",
  "上下结构",
  "独体结构",
  "半包围结构",
  "全包围结构",
  "品字结构",
  "上中下结构",
  "左中右结构"
]

function App() {
  const [surnames, setSurnames] = useState<string[]>([])
  const [form] = Form.useForm<GetSurnameParams>();

  return (
    <div>
      <Form form={form} onValuesChange={values => {
        let params = {
          ...form.getFieldsValue(),
          ...values,
        }
        params = {
          ...params,
          counts: params.count ? [params.count] : undefined,
        }
        console.log(params)
        setSurnames(searchSurname(params));
      }}>
        <Form.Item label="笔画" name={'count'}>
          <InputNumber/>
        </Form.Item>
        <Form.Item label="结构" name={'struct'}>
          <Select options={STUCTURES.map(item => ({
            label: item,
            value: item
          }))}/>
        </Form.Item>
        <Form.Item label="是否有点" name={'hasDot'}>
          <Radio.Group optionType={'button'} options={[
            {value: undefined, label: '未选中'},
            {value: true, label: '有'},
            {value: false, label: '无'},
          ]}></Radio.Group>
        </Form.Item>
        <Form.Item label="是否有勾" name={'hasGou'}>
          <Radio.Group optionType={'button'} options={[
            {value: undefined, label: '未选中'},
            {value: true, label: '有'},
            {value: false, label: '无'},
          ]}></Radio.Group>
        </Form.Item>
      </Form>
      <div>
        {surnames.map((surname) => {
          return (
            <div key={surname}>
              {surname}
            </div>
          )
        })}
      </div>
    </div>
  )
}

export default App
